<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>dom查询的剩余方法</title>
    </head>
    <body>
        <div id="box" class="box1">
            <div>我是第一个div的子标签内的内容</div>
            <div>我是第二个div的子标签内的内容</div>
        </div>

        <div></div>
    </body>
</html>
<script>
    // 获取到body 标签  ⭐body
    /*
        在document中有一个属性body ，他保存的时body的引用
        
    */
    var body = document.getElementsByTagName("body")[0];
    var body = document.body;

    // 获取html 标签    ⭐ html 
    /*
        document.documentElement 保存的是html 根标签
    */
    var html = document.getElementsByTagName("html")[0];
    var html = document.documentElement;


    /*
        document.all 代表页面中所有的元素   ⭐ 所有元素
    */
    var all = document.getElementsByTagName("*");
    var all = document.all;


    /*
        根据元素的 class 属性值查询一组元素节点对象  ⭐ class 属性值查询元素
        getElementsByClassName(""); 可以根据class属性值获取一组元素节点对象 
            IE8 及以下不支持 ❗❗❗
    */
    // 获取class 为 box1的对象
    var box1 = document.getElementsByClassName("box1");
    // console.log(box1.length);

    // 获取页面中所有的div
    var divs = document.getElementsByTagName("div");
    
    
    //          选择器查询 
    /*
        document.querySelector();   ⭐ 查询一个
            - 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
            - 虽然 IE8 中没有getElementsByClass() 但是可以使用 querySelector()代替
            - 使用该方法总会返回唯一的元素，如果满足条件的元素有多个，那么他只会返回第一个
    */
    // 获取class 为box1中的所有的div
    var div = document.querySelector(".box1");
    // console.log(box1[0].firstChild);  自研，忽略了获取第一个子元素会包括空格，要把空格和回车删掉

    /*
        document.querySelectorAll();    ⭐ 查询多个
            - 该方法和querySelector() 用法类似，不同的是他会将符合条件的元素封装到一个数组中返回
            - 即使符合条件的元素只有一个，也会返回数组
    */
    // 获取页面所有class 为box1 的对象
    var box1 = document.querySelectorAll("#box");
    
    // console.log(box1[0]);
</script>